<template>
  <div class="tabbar">
    <router-link class="tabbar__item" to="/" exact>
      <img class="tabbar__icon common" src="@/assets/img/tab_game.png">
      <img class="tabbar__icon active" src="@/assets/img/tab_game_selected.png">
      <label class="tabbar__text">玩游戏</label>
    </router-link>
    <router-link class="tabbar__item" to="/server">
      <img class="tabbar__icon common" src="@/assets/img/tab_server.png">
      <img class="tabbar__icon active" src="@/assets/img/tab_server_selected.png">
      <label class="tabbar__text">开服</label>
    </router-link>
    <router-link class="tabbar__item" to="/gift">
      <img class="tabbar__icon common" src="@/assets/img/tab_gift.png">
      <img class="tabbar__icon active" src="@/assets/img/tab_gift_selected.png">
      <label class="tabbar__text">礼包</label>
    </router-link>
    <router-link class="tabbar__item" to="/user">
      <img class="tabbar__icon common" src="@/assets/img/tab_mine.png">
      <img class="tabbar__icon active" src="@/assets/img/tab_mine_selected.png">
      <label class="tabbar__text">我的</label>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'tabBar'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.tabbar {
  align-items: center;
  background-color: #fff;
  bottom: 0;
  box-shadow: 0 0 0.02rem 0 rgba(0, 0, 0, 0.3);
  color: #999;
  display: flex;
  font-size: 0.1rem;
  height: 0.51rem;
  left: 0;
  position: fixed;
  text-align: center;
  width: 100%;

  &__item {
    flex: 1;

    &.active {
      color: #333;

      .common {
        display: none;
      }

      .active {
        display: inline;
      }
    }

    .active {
      display: none;
    }
  }

  &__icon {
    height: 0.27rem;
    width: 0.27rem;
  }

  &__text {
    display: block;
    line-height: 1;
    margin-top: 0.05rem;
  }
}
</style>
